<!--
 * @Author: weikang
 * @Description: 
 * @Date: 2023-12-19 09:39:40
 * @LastEditTime: 2023-12-22 11:24:14
 * @FilePath: \lianyungang-dashborad\src\model\project.vue
-->
<template>
  <div class="model-panel">
    <my-title title="项目详情"></my-title>
    <div class="content-panel">
      <div class="line-flex-panel">
        <div class="xm-box">
          <div class="icon-xm"></div>
          <div class="num-panel">
            <div class="pro-title">在建项目总数</div>
            <div class="num-text" style="color: #10d9ff">
              {{ dataInfo.zjxmzs || 0 }}
            </div>
          </div>
        </div>
        <div class="xm-box">
          <div class="icon-nmg"></div>
          <div class="num-panel">
            <div class="pro-title">农民工总数</div>
            <div class="num-text" style="color: #3effb9">
              {{ dataInfo.nmgzs || 0 }}
            </div>
          </div>
        </div>
      </div>
      <div class="pro-list" :key="key">
        <div class="pro-item" v-for="(item, index) in dataList" :key="index">
          <div class="line-flex-panel">
            <span class="pro-name">{{ item.name }}</span>
            <span class="pro-num">{{ item.value }}</span>
          </div>
          <div class="progress-panel">
            <progressBar :percentage="getPercent(item)" />
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script setup>
import MyTitle from "@/components/MyTitle.vue";
import progressBar from "@/components/progressBar.vue";
import { reactive, ref } from "vue";
import { getProjectDetail } from "@/api/apis.js";

const dataInfo = ref({});
const key = ref(1);
const dataList = reactive([
  {
    name: "办理施工许可证项目数",
    value: "0",
    prop: "blsgxkzxms",
  },
  {
    name: "办理农民工工资保证金项目数",
    value: "0",
    prop: "blnmggzbzjxms",
  },
  {
    name: "办理工程款支付担保项目数",
    value: "0",
    prop: "lsnmgsmzxms",
  },
  {
    name: "落实农民工实名制项目数",
    value: "0",
    prop: "blgckzfdbxms",
  },
  {
    name: "落实专用账户管理项目数",
    value: "0",
    prop: "lszyzhglxms",
  },
  {
    name: "按月人工费拨付项目数",
    value: "0",
    prop: "ayrgfbfxms",
  },
  {
    name: "办理工伤保险参保项目数",
    value: "0",
    prop: "blgsbxcbxms",
  },
]);

const getPercent = (item) => {
  return (Number(item.value) / Number(dataInfo.value.zjxmzs)) * 100;
};

getProjectDetail().then((res) => {
  dataInfo.value = res.data;
  dataList.forEach((item) => {
    item.value = res.data[item.prop] || 0;
  });
  key.value++;
});
</script>

<style lang="scss" scoped>
.model-panel {
  height: 587px;
  .xm-box {
    width: 50%;
    display: flex;
  }
  .xm-box + .xm-box {
    position: relative;
    &::before {
      content: "";
      position: absolute;
      left: 0;
      top: 20%;
      height: 40%;
      background: rgba(255, 255, 255, 0.5);
      width: 1px;
    }
  }
  .icon-xm {
    width: 110px;
    height: 114px;
    background: url("/src/assets/xm.png") no-repeat;
    background-size: 100% 100%;
  }
  .icon-nmg {
    width: 110px;
    height: 114px;
    background: url("/src/assets/nmg.png") no-repeat;
    background-size: 100% 100%;
  }
  .num-panel {
    padding: 20px 0;
  }
  .pro-title {
    height: 22px;
    font-size: 18px;
    font-family: PingFangSC, PingFang SC;
    font-weight: 500;
    color: #ffffff;
    line-height: 22px;
    letter-spacing: 1px;
  }
  .num-text {
    font-size: 32px;
    font-family: DINPro, DINPro;
    font-weight: bold;
    color: #3effb9;
    line-height: 40px;
    letter-spacing: 3px;
  }
  .pro-list {
    .pro-item + .pro-item {
      margin-top: 24px;
    }
    .pro-item {
      padding: 0 28px;
      .line-flex-panel {
        align-items: center;
      }
      .pro-name {
        font-size: 14px;
        font-family: PingFangSC, PingFang SC;
        font-weight: 600;
        color: #ffffff;
        line-height: 18px;
        letter-spacing: 1px;
      }
      .pro-num {
        margin-left: 10px;
        font-size: 22px;
        font-family: DINPro, DINPro;
        font-weight: bold;
        color: #5bfff9;
        line-height: 22px;
        letter-spacing: 2px;
      }
      .progress-panel {
        margin-top: 8px;
      }
    }
  }
}
</style>